<!DOCTYPE html>
<html>

<head>
    <title>Gateleen Playground</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href="css/gateleen.css" rel="stylesheet">

    <script src="js/sockjs.js"></script>
    <script src="js/vertxbus.js"></script>

    <script src="js/angularjs/angular.min.js"></script>
    <script src="js/angularjs/angular-animate.js"></script>

    <script src="js/gateleen-hook.js"></script>
</head>

<body>

<script>
    var HOOK_TEST_URL = '/playground/server/tests/hooktest/';

    angular.module('hooktest', ['gateleen.hook'])
        .controller('HookJsDemoController', function ($scope, $http, Hook) {
            var self = this,
                eventId = 1,
                handlerId = 1;

            self.messages = [];
            self.handlers = [];

            self.install = function (path, fetch, filter) {
                var id = handlerId++;
                path = HOOK_TEST_URL + path;
                var remover = Hook.listen(path, function (message, request) {
                    var resource = /\/$/.test(path) ? request.uri.split('/').pop() : '';
                    message.info = 'Listener ' + id + ' received:' + (resource.length > 0 ? '[' + resource + '] ' : '');
                    self.messages.push(message);
                }, {fetch: fetch, filter: filter});
                self.messages.push({text: 'Installing listener ' + id});
                self.handlers.push({remover: remover, id: id});
            };

            self.remove = function () {
                var handler = self.handlers.pop();
                if (handler) {
                    self.messages.push({text: 'Removing listener ' + handler.id});
                    handler.remover();
                }
            };

            self.put = function (path, collection) {
                var id = eventId++;
                path = path + ( collection ? '/resource-' + id : '' );
                $http.put(HOOK_TEST_URL + path, {text: '<Message ' + id + '>'});
            };

            self.clearLog = function () {
                self.messages = [];
            };

            self.clearCollection = function (path) {
                $http.delete(HOOK_TEST_URL + path);
            };

        });

</script>

<div ng-app="hooktest" class="container-fluid" style="margin: 15px">
    <div ng-controller="HookJsDemoController as hookJs" class="row">
        <div class="panel panel-default">
            <div class="panel-heading">Hook JS Demo</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-3">
                        <button type="button" class="btn btn-primary btn-lg btn-block" id="Place Single Hook"
                                ng-click="hookJs.install('hook-demo')">Place Single Hook
                        </button>
                        </br>
                        <button type="button" class="btn btn-primary btn-lg btn-block" id="Place Single Fetching Hook"
                                ng-click="hookJs.install('hook-demo', 'single')">Place Single Fetching Hook
                        </button>
                        </br>
                        <button type="button" class="btn btn-primary btn-lg btn-block" id="Place Single Hook with Filter"
                                ng-click="hookJs.install('messages/public', false, '.*/messages/public')">Place Single Hook with Filter
                        </button>
                        </br>
                        <button type="button" class="btn btn-primary btn-lg btn-block" id="Place Collection Hook"
                                ng-click="hookJs.install('messages/')">Place Collection Hook
                        </button>
                        </br>
                        <button type="button" class="btn btn-primary btn-lg btn-block" id="Place Collection Fetching Hook"
                                ng-click="hookJs.install('messages/', 'collection')">Place Collection Fetching Hook
                        </button>
                        </br>
                        <button type="button" class="btn btn-primary btn-lg btn-block" id="Remove Last Hook"
                                ng-click="hookJs.remove()">Remove Last Hook
                        </button>
                        </br>
                        <button type="button" class="btn btn-primary btn-lg btn-block" id="PUT Single"
                                ng-click="hookJs.put('hook-demo')">PUT Single
                        </button>
                        </br>
                        <button type="button" class="btn btn-primary btn-lg btn-block" id="PUT Collection"
                                ng-click="hookJs.put('messages', true)">PUT Collection
                        </button>
                    </div>

                    <div class="col-md-9">
                        <div class="row">
                            <div class="col-md-6">
                                <button type="button" class="btn btn-info btn-lg btn-block" id="Clear log"
                                        ng-click="hookJs.clearLog()">Clear log
                                </button>
                            </div>

                            <div class="col-md-6">
                                <button type="button" class="btn btn-info btn-lg btn-block" id="Clear collection"
                                        ng-click="hookJs.clearCollection('messages')">Clear collection
                                </button>
                            </div>
                        </div>
                        </br>
                        <div class="row" style="padding-right: 15px">
                            <ul class="list-group" ng-show="hookJs.messages" id="hookjs messages">
                                <li class="list-group-item" ng-repeat="message in hookJs.messages track by $index">
                                    {{message.info}}{{message.text}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>